<template>
  <view class="home-page">
    <!-- 顶部导航栏（红金主题适配） -->
    <view class="top-nav">
      <!-- <view class="tab-top">
    		<view class="nav-tab" :class="{ active: currentTab === 'self' }" @click="currentTab = 'self'">自取</view>
    		<view class="nav-tab" :class="{ active: currentTab === 'delivery' }" @click="currentTab = 'delivery'">外卖</view>
    	</view> -->
    	<view class="tab-top">
    		
    		<view class="nav-tab1" :class="{ active: currentTab === 'self' }" @click="currentTab = 'self'">自取</view>
    		<view class="nav-tab1" :class="{ active: currentTab === 'delivery' }" @click="currentTab = 'delivery'">外卖</view>
    	</view>
    	<!-- <view class="tab-search"></view> -->
      <view class="search-icon">
        <u-icon name="search" size="24" color="#000000"></u-icon>
      </view>
    </view>

    <!-- 轮播图区域（优化渐变覆盖） -->
    <swiper class="banner-swiper" indicator-dots circular>
      <swiper-item v-for="(item, index) in bannerList" :key="index">
        <image :src="item.image" mode="widthFix" class="banner-img"></image>
      </swiper-item>
    </swiper>

    <!-- 店铺信息区域（红金主题重构） -->
    <view class="store-info">
      <view class="store-header">
        <text class="star-icon">★</text>
        <text class="store-title">观澜老街店</text>
        <u-icon name="arrow-right" size="20" class="arrow-icon"></u-icon>
      </view>
      <view class="store-meta">
        <text class="make-tag">下单立即制作</text> 
        <text class="divider">|</text> 
        <text class="distance-tag">距离您536m</text>
      </view>
      <view class="coupon-list">
        <text class="coupon-item" 
              v-for="(coupon, idx) in couponList" 
              :key="idx">{{ coupon }}</text>
      </view>
    </view>

    <!-- 活动横幅（保持简洁，可替换为动态数据） -->
    <image src="/static/images/activity-banner.png" mode="widthFix" class="activity-banner"></image>

    <!-- 左侧分类导航（红金主题优化） -->
    <view class="category-nav">
      <view 
        class="category-item" 
        v-for="(category, cIdx) in categoryList" 
        :key="cIdx"
      >
        <image :src="category.icon" mode="widthFix" class="category-icon"></image>
        <text class="category-text">{{ category.text }}</text>
      </view>
    </view>

    <!-- 商品列表区域（交互增强） -->
    <view class="goods-list">
      <view 
        class="goods-item" 
        v-for="(goods, gIdx) in goodsList" 
        :key="gIdx"
        @touchstart="handlePress(goods, $event)"
        @touchend="handleRelease"
      >
        <image :src="goods.image" mode="widthFix" class="goods-img"></image>
        <view class="goods-info">
          <text class="goods-name">{{ goods.name }}</text>
          <view class="tags">
            <text class="tag" 
                  v-for="(tag, tIdx) in goods.tags" 
                  :key="tIdx">{{ tag }}</text>
          </view>
          <text class="desc">{{ goods.desc }}</text>
          <view class="price">
            <text class="current-price">¥{{ goods.currentPrice }} 到手价</text>
            <text class="original-price" v-if="goods.originalPrice">¥{{ goods.originalPrice }} 起</text>
          </view>
          <u-icon 
            ref="addIcon" 
            name="plus" 
            size="32" 
            class="add-icon" 
            @click="handleAdd(goods)"
          ></u-icon>
        </view>
      </view>
    </view>

    <!-- 底部提示 -->
    <view class="bottom-tip">
      {{ bottomTipText }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'self', // self:自取  delivery:外卖
      bannerList: [
        { image: '/static/banners/banner01.png' },
        { image: '/static/banners/banner02.png' },
        { image: '/static/banners/banner03.png' }
      ],
      couponList: ['云岭茉莉白*中 9.9元喝', '云深幽兰11.9元喝'],
      categoryList: [
        { icon: '/static/images/recommend.png', text: '古茗推荐' },
        { icon: '/static/images/star.png', text: '星穹铁道联名套餐' },
        { icon: '/static/images/milk-tea.png', text: '原叶·鲜奶茶' },
        { icon: '/static/images/fruit.png', text: '现榨·果蔬' }
      ],
      goodsList: [
        {
          image: '/static/goods/good01.png',
          name: '云深幽兰',
          tags: ['11.9元活动', '限2杯', '重磅新品', '香草'],
          desc: '甄选锡兰红茶，幽扬茶香交融奶香，搭配香草奶芙，口感超丰富',
          currentPrice: '11.9',
          originalPrice: '14.9'
        },
        {
          image: '/static/goods/good02.png',
          name: '云岭茉莉白',
          tags: ['9.9元活动', '限2杯', '年度销量第一'],
          desc: '甄选茉莉鲜花多次窨制，花香入茶骨，搭配冷藏牛乳，回味悠长',
          currentPrice: '9.9',
          originalPrice: '13'
        }
      ],
      bottomTipText: '云深幽兰11.9元喝，今日可享受1单',
      pressTimer: null // 长按防抖定时器
    }
  },
  methods: {
    handleAdd(goods) {
      console.log('添加商品到购物车', goods);
      // 按钮缩放反馈
      this.$refs.addIcon.scale = 0.9;
      setTimeout(() => {
        this.$refs.addIcon.scale = 1;
      }, 200);
    },
    handlePress(goods, e) {
      // 长按逻辑（可选：如显示商品详情）
      this.pressTimer = setTimeout(() => {
        console.log('长按商品', goods);
        // 可触发弹窗或路由跳转
      }, 500);
    },
    handleRelease() {
      clearTimeout(this.pressTimer);
    }
  }
}
</script>

<style scoped>
/* 全局红金主题适配 */
.home-page {
  background-color: #fff;
  min-height: 100vh;
  /* 顶部渐变背景，模拟参考图氛围 */
  background: linear-gradient(to bottom, #b92b27 0%, #fff 200rpx); 
}

/* 顶部导航栏 */
/* 顶部导航 */
.top-nav {
  display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	position: absolute;
	top: 40rpx;
	left: 20rpx;
	/* width: 100%; */
	z-index: 100;
  align-items: center;
	/* margin: 2rem 2rem 2rem 2rem; */
  /* padding: 10rpx 10rpx 10rpx 10rpx; */
  /* background-color: #fff; */
  /* border-bottom: 1px solid #f5f5f5; */
}

.tab-top{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 160rpx;
	border-radius: 66rpx;
	margin-right: 10rpx;
	height: 50rpx;
	padding: 5rpx;
	background-color: rgba(255, 255, 255, 0.5);
}
.nav-tab1{
	text-align: center;
	line-height: 30px;
	height: 50rpx;
	width: 80rpx;
	font-size: 0.6rem;
	border-radius: 50rpx;
	/* color: #fff; */
	/* background-color: #000000; */
}
.nav-tab {
  font-size: 32rpx;
  padding: 10rpx 30rpx;
  margin-right: 20rpx;
  border-radius: 20rpx;
}
.nav-tab1.active {
  background-color: #000000;
  color: #fff;
}
.search-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 60rpx;
	height: 60rpx;
	/* margin-left: 100rpx; */
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.5);
  margin-left: auto;
	margin-right: 20rpx;
}

/* 轮播图 */
.banner-swiper {
  height: 320rpx; /* 增加高度，适配主题 */
}
.banner-img {
  width: 100%;
  height: 100%;
}

/* 店铺信息 */
.store-info {
  position: relative;
  margin: -20rpx 20rpx 0;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}
.store-header {
  display: flex;
  align-items: center;
  font-size: 32rpx;
  font-weight: bold;
  color: #b92b27;
}
.star-icon {
  color: #ffd700;
  margin-right: 8rpx;
  font-size: 28rpx;
}
.arrow-icon {
  margin-left: auto;
  color: #999;
  transition: all 0.3s;
}
.arrow-icon:hover {
  transform: translateX(5rpx);
}
.store-meta {
  display: flex;
  align-items: center;
  margin-top: 8rpx;
  font-size: 26rpx;
  color: #666;
}
.divider {
  margin: 0 6rpx;
  color: #ccc;
}
.coupon-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 16rpx;
}
.coupon-item {
  background-color: #fff0f0;
  color: #b92b27;
  padding: 8rpx 18rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  margin-right: 12rpx;
  margin-top: 10rpx;
  box-shadow: 0 2rpx 6rpx rgba(185,43,39,0.1);
  transition: all 0.3s;
}
.coupon-item:hover {
  transform: scale(1.05);
}

/* 活动横幅 */
.activity-banner {
  width: 100%;
  height: auto;
  margin: 20rpx;
  border-radius: 12rpx;
}

/* 左侧分类导航 */
.category-nav {
  width: 160rpx;
  background-color: #fff;
  float: left;
  min-height: 500rpx;
  padding: 20rpx 0;
  margin-left: 20rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
}
.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
  padding: 10rpx;
  border-radius: 12rpx;
  transition: all 0.3s;
}
.category-item:active {
  background-color: #fef2f2;
}
.category-icon {
  width: 70rpx;
  height: 70rpx;
  margin-bottom: 8rpx;
}
.category-text {
  font-size: 24rpx;
  color: #333;
}

/* 商品列表 */
.goods-list {
  margin-left: 180rpx;
  padding: 20rpx;
}
.goods-item {
  display: flex;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #f5f5f5;
  transition: all 0.3s;
}
.goods-item:active {
  transform: translateY(-2rpx);
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}
.goods-img {
  width: 180rpx;
  height: 180rpx;
  margin-right: 20rpx;
  border-radius: 12rpx;
}
.goods-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
  color: #b92b27;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 8rpx;
}
.tag {
  background-color: #fef2f2;
  color: #b92b27;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-size: 22rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
}
.desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 10rpx;
  line-height: 40rpx;
}
.price {
  display: flex;
  align-items: baseline;
  margin-bottom: 10rpx;
}
.current-price {
  font-size: 30rpx;
  color: #e60012;
  font-weight: bold;
  margin-right: 10rpx;
}
.original-price {
  font-size: 26rpx;
  color: #999;
  text-decoration: line-through;
}
.add-icon {
  color: #3cc51f;
  margin-left: auto;
  transition: all 0.3s;
}
.add-icon:active {
  transform: scale(0.9);
}

/* 底部提示 */
.bottom-tip {
	position: fixed;
	width: 100%;
	bottom: 3rem;
	z-index: 100;
  text-align: center;
  padding: 20rpx;
  font-size: 28rpx;
  color: #666;
  background-color: #f8f8f8;
}
</style>

